<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>参与投票</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script src="js/axios.min.js"></script>
	<script src="js/vue.min.js"></script>
	<script src="js/vote.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
	<myheader></myheader>
	<div id="vote" class="wrap">
	<h2>参与投票</h2>
	<ul class="list">
		<li>
			<h4>{{vote.vname}}</h4>
			<p class="info">共有 {{vote.items.length}} 个选项，
							已有 {{vote.users || 0}} 个网友参与了投票。</p>
			<form method="post" action="Vote!save.action">
			    <input type="hidden" name="entityId" value="103"/> 
				<ol>
					<li v-for=" item in vote.items ">
						<input :type="vote.vtype=='单选'?'radio':'checkbox'"
							   v-model="selected"
							   name="options" :value="item.id"/>
						{{item.iname}}
					</li>
				</ol>
				<p class="voteView">
					<input type="image" @click.prevent="commit" src="images/button_vote.gif" />
					<a href="view.html"><img src="images/button_view.gif" /></a></p>
			</form>
		</li>
	</ul>
</div>
	<myfooter></myfooter>
</div>
<script>
	var v = new Vue({
		el : "#app",
		data : {
			vote : {
				items:[],
				id : 0,
			},
			selected : []
		},
		created(){
			// /vote.html?id=1 ==> search => ?id=1
			let id = location.search.replace(/\?id=(\d+)/,"$1");
			axios.get("vote/queryById?id=" + id).then(res=>{
				this.vote = res.data;
			});
			this.vote.id = id;
		},
		methods:{
			commit(){
				let params = new URLSearchParams();
				params.append("vid", this.vote.id);
				if (this.selected.forEach){
					// 多选
					this.selected.forEach( iid=>{
						params.append("iid", iid);
					});
				} else {
					// 单选
					params.append("iid", this.selected);
				}
				axios.post("record/commit.s", params).then(res=>{
					result(res, this, ()=> location.href="view.html?id=" + this.vote.id);
				})
			}
		}
	})
</script>
</body>
</html>
